<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="detailData" ref="detailData" label-width="160px" size="mini" label-position="right">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="合同名称：">{{detailData.contractName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名称：">{{detailData.customerName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业联系人：">{{detailData.contactPerson}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：">{{detailData.telephone}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人：">{{detailData.directorUserName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方式：">{{detailData.paymentMethodName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签约时间：">{{detailData.signingDate}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间：">{{detailData.finishDate}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务类型：">{{detailData.businessTypeName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签约标段：" v-if="detailData.stageFlag==1">{{detailData.stageNumberName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同金额（元）：">{{detailData.contractAmount}}</el-form-item>
            <el-table :data="detailData.contractStageVoList" size="mini" style="margin-bottom: 20px;" header-cell-class-name="table-header-gray" v-loading="isShowloading" v-if="detailData.stageFlag==1">
              <el-table-column prop="stageNumberName" align="center" label="标段"></el-table-column>
              <el-table-column prop="stageAmount" align="center" label="分项合同金额（元）"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目属性：">{{detailData.projectAttribute==1?'公司项目':'合作单位'}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作客户：">{{detailData.customerName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属项目：">{{detailData.projectName}}</el-form-item>
            <el-table :data="detailData.contractStageVoList" size="mini" style="margin-bottom: 20px;" header-cell-class-name="table-header-gray" v-loading="isShowloading" v-if="detailData.stageFlag==1">
              <el-table-column prop="stageNumberName" align="center" label="标段"></el-table-column>
              <el-table-column prop="projectName" align="center" label="分项所属项目"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-form-item label="合同附件：">
              <div class="FileDoList" v-if="detailData.contractFileVoList">
                <div v-for="(item,index) in detailData.contractFileVoList" :key="index">
                  <span>{{item.fileName}}</span>
                  <b @click="filespreview(item)">预览</b>
                  <strong @click="loadknowledgedownload(item)">下载</strong>
                 </div>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import Pdfpreview from '@/components/selector/Pdfpreview.vue';
export default {
  name: 'Contractsadd',
  data () {
    return {
      loading: false,
      isShowloading: false,
      detailData: {}
    };
  },
  created () {
  },
  computed: {
  },
  mounted () {
    this.loadDetailWidgetData()
  },
  methods: {
    /**
     * 项目合同详情
     */
    loadDetailWidgetData () {
      let params = {
        projectId: this.$route.query.projectId
      };
      return new Promise((resolve, reject) => {
        Administration.viewContract(this, params).then(res => {
          this.detailData = res.data
          this.$forceUpdate()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * pdf预览
     */
    filespreview (data) {
      let params = {
        files: data.pdfPath
      };
      this.$dialog.show(data.fileName, Pdfpreview, {
        area: ['100%', '100%']
      }, params).then(res => {
        this.loadknowledgedetail()
      }).catch(e => {
      });
    },
    /**
     * 文件下载
     */
    loadknowledgedownload (data) {
      if (data.fileType === 'jpg' || data.fileType === 'png') {
        window.open(data.pdfPath)
      } else {
        window.open(data.filePath)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.FileDoList{
  cursor: pointer;
  div{
    span{margin-right: 10px;}
    b{color: #409EFF;font-weight: normal;margin-right: 10px;}
    strong{color: #FF0000;font-weight: normal;}
  }
}
</style>
